<template>
  <el-dropdown>
    <el-button class="editor-button-bar" title="功能状态测试" type="info" plain>测</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="showDomlevel()">获得dom层级</el-dropdown-item>
        <el-dropdown-item @click="showXXXevel()">showXXXevel</el-dropdown-item>
        <el-dropdown-item @click="setSrc()">设置src</el-dropdown-item>
        <el-dropdown-item @click="showchooseNode()">展示选中元素</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { Editor } from "@tiptap/vue-3";
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

function showDomlevel() {
  const editorInstance = props.editor;
  const path = (editorInstance?.state.selection.$from as unknown as { path: [] }).path as [];
  let num = 0;
  for (const node of path) {
    if (((node as { type: object })?.type as { name: string })?.name) {
      console.log(num++, ((node as { type: object })?.type as { name: string }));
    }
  }
}
function showXXXevel() {
  const editorInstance = props.editor;
  console.log(editorInstance?.state.selection.$from);
}
const showchooseNode = () => {
  const { state } = props.editor!;
  // 查找当前选中的节点
  const { selection } = state;
  const { $from } = selection;
  const node = $from.node();
  //图片或视频被选中
  alert((selection as unknown as { node: { type: { name: object } } }).node?.type.name);
  //段落或者code等被选中
  alert(node.type.name);
};





const setSrc = () => {


  props.editor
    .chain()
    .focus()
    .updateAttributes('image', { src: 'asdfasdf' })
    .run();

  props.editor.chain().focus().updateAttributes('video', { 'src': "1111" }).run();
};
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}

.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}
</style>
